<template>
  <section class="strategy-pool">
    <div class="title">{{ title }}</div>
    <empty-pool class="empty-pool" v-if="isNoData" :desc="emptyText"></empty-pool>
    <div :class="{ 'box-center': showLoading }" v-else>
      <atom-loading v-if="showLoading" />
      <div class="selected-pool" v-else>
        <!-- 日期 -->
        <atom-sticky :class="`calendar ${remindDateArr.length ? 'has-renewal' : ''}`" v-if="showDatePick" offset-top="12.8vw">
          <atom-calendar-tab
            :value="selectedDate"
            @input="onDateChange"
            :max-date="maxDate"
            :weekFormatter="weekFormatter"
            :filter="filterDate"
            @click-calendar="show"
          >
          </atom-calendar-tab>
        </atom-sticky>
        <atom-calendar
          v-model="showCalendar"
          :max-date="maxDate"
          :default-date="selectedDate"
          :effect-date-rule="filterCalendar"
          :formatter="formatter"
          @confirm="confirm"
        >
        </atom-calendar>
        <!-- 工具栏 -->
        <atom-sticky class="tool-sticky" offset-top="27.14vw">
          <div class="tool">
            <div></div>
            <div class="toggle" v-if="stockList.length">
              <span class="btn" @click="currentMode = 0" :class="{ active: currentMode === 0 }"
                >列表</span
              >
              <div class="split"></div>
              <span class="btn" @click="currentMode = 1" :class="{ active: currentMode === 1 }"
                >卡片</span
              >
            </div>
          </div>
        </atom-sticky>
        <!-- 列表 -->
        <template v-if="currentMode === 0">
          <ServicePackStockList
            :detailTableData="stockList"
            offsetTop="39.32vw"
          ></ServicePackStockList>
        </template>
        <!-- 卡片 -->
        <template v-else>
          <tracking-card
            v-for="(card, index) in signalCards"
            :key="index"
            buttonText="全部信号"
            :hasSubTitle="true"
            :stockInfo="stockList[index]"
            :signals="card"
            :sortTimeType="sortTimeType"
          ></tracking-card>
        </template>
        <div class="record-block" v-if="dataList.length">
          <div class="btn" @click.stop="showHolding">
            持仓记录<svg-icon icon="arrow-right"></svg-icon>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import EmptyPool from '@/components/detail/EmptyPool.vue';
import TrackingCard from '@/components/portfolio/TrackingCard.vue';
import ServicePackStockList from '@/components/servicePack/StockList.vue';
import { BASE_URL } from '@/config/portfolio';
import dealportfolioData from '@/mixins/dealPortfolioData';

export default {
  mixins: [dealportfolioData],
  components: {
    EmptyPool,
    TrackingCard,
    ServicePackStockList,
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    emptyText: {
      type: String,
      default: '暂无推荐，请持续关注',
    },
  },
  computed: {
    isNoData() {
      return !this.dataList.length && !this.showLoading;
    },
    signalCards() {
      return this.cardList.map(card => (Array.isArray(card) ? [...card] : []));
    },
  },
  async created() {
    this.showLoading = true;
    this.portfolioId = window.getParam('portfolio_id');
    if (this.portfolioId) {
      await this.getDateList();
      await this.getPoolData();
      this.getRemind();
    }
    this.showLoading = false;
  },
  methods: {
    onDateChange(val) {
      this.selectedDate = val;
      this.getPoolData();
    },
    showHolding() {
      location.href = `${BASE_URL}position?portfolio_id=${window.getParam('portfolio_id')}&mode=${
        this.currentMode
      }&sortTimeType=${this.sortTimeType}&title=精选股票池&type=servicePack`;
    },
  },
};
</script>

<style lang="less" scoped>
.empty-pool {
  position: relative;
  z-index: 10;
}
/deep/.renewal-day .atom-calendar__top-info {
  color: #ff2436;
}
/deep/.renewal-day .atom-calendar__selected-day .atom-calendar__top-info {
  color: #fff;
}
.has-renewal /deep/.atom-calendar-tab__icon-wrapper {
  position: relative;
  &::before {
    position: absolute;
    .bg-mixins;
    content: '';
    background-image: url('../../assets/images/renewal.png');
    width: 26px;
    height: 14px;
    z-index: 11;
    right: -10px;
  }
}
.tool-sticky /deep/.atom-sticky--fixed {
  margin: 0 !important;
  padding: 0 !important;
}
.atom-calendar-tab {
  width: 100%;
}
.has-renewal /deep/.atom-calendar-tab__icon-wrapper {
  position: relative;
  &::before {
    position: absolute;
    .bg-mixins;
    content: '';
    background-image: url('../../assets/images/renewal.png');
    width: 26px;
    height: 14px;
    z-index: 11;
    right: -10px;
  }
}

section {
  background: var(--bg-color-2);
  border-radius: 6px;
  .title {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    color: var(--text-1);
  }
}

.strategy-pool {
  box-sizing: border-box;
  min-height: 340px;
  height: auto;
  position: relative;
  .selected-pool {
    min-height: 340px;
    padding-bottom: 5.9vw;
  }
}

.box-center {
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-1);
  padding: 16px 0;
  .icon-btn {
    display: flex;
    align-items: center;
    svg {
      margin-right: 4px;
    }
  }
  .title {
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 22px;
    color: var(--text-1);
  }
  .toggle {
    display: flex;
    align-items: center;
  }
  .btn {
    color: var(--text-2);
    &.active {
      color: var(--text-1);
      font-weight: 600;
    }
  }
  .split {
    width: 1px;
    height: 12px;
    background: var(--text-4);
    margin: 0 12px;
  }
}

/deep/.atom-sticky--fixed .tool {
  padding: 16px;
  background: var(--bg-color-2);
}

.record-block {
  width: 100%;
  position: absolute;
  bottom: 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--text-3);
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background: var(--bg-color-2);

  .btn {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
